﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>分类</title>
<!--标准mui.css-->
<link rel="stylesheet" href="{:_SKIN}/weixin/cate/css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/cate/css/base.css">
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/cate/css/common.css">
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_400457_vapvxk8ci8uxr.css"/>
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/shop/css/font-icon.css"/>
<script src="{:_SKIN}/weixin/cate/js/jquery.min.js" ></script>
<script src="{:_SKIN}/weixin/cate/js/common.js" ></script>
<style type="text/css">
body{ max-width:100%; } 
.mui-bar-nav~.mui-content{padding-top:50px; overflow:hidden;}
.mui-row.mui-fullscreen>[class*="mui-col-"] {height: 100%;}
.mui-segmented-control .mui-control-item {line-height: 50px;width: 100%;}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {background-color: #fff;}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{ color:#505050;border-bottom: 1px solid #ffffff;  background-color:transparent;}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{ color:#15ce67;}
.xin-1{width: 100%;max-width: 750px;height: 60px;position: fixed;bottom: 0;background: #FFFFFF;margin: 0 auto;z-index: 999;border-top: 1px solid #f4f4f4;}
.xin-1 ul{width: 90%;margin: 0 auto;}
.xin-1 ul li{width: 20%;text-align: center;font-size: 14px;float: left;}
.xin-1 ul li img{width: 22px;height: 22px;}
.mt_5{margin-top: -5px;}
.font-12{font-size: 12px;}
.active{color: #15CE67 !important;}

</style>
</head>

<body>
<div id="header" class="search-head header mui-bar mui-bar-nav">
  <div class="search-box">
    <input id="search" class="search-input" type="search" name="search" placeholder="请输入关键词">
  </div>
  <div class="notice-box">
    <span class="notice-icon"><i class="iconfont icon-sousuo"></i></span>
    <span>搜索</span>
  </div>
</div>
  <!--my-head-end-->
  <div class="xin-1">
				<ul>
					<a href="#">
						<li>
							<i class="iconfont icon-shouye font_24 active"></i>
							<p class="active font-12 mt_5">首页</p>
						</li>
					</a>
					<a href="#">
						<li>
							<i class="iconfont icon-fenlei font_24"></i>
							<p class="font-12 mt_5">分类</p>
						</li>
					</a>
					<a href="#">
						<li>
							<i class="iconfont icon-fabu font_24"></i>
							<p class="font-12 mt_5">发布</p>
						</li>
					</a>
					<a href="#">
						<li>
							<i class="iconfont icon-shouye2 font_24"></i>
							<p class="font-12 mt_5">购物车</p>
						</li>
					</a>
					<a href="#">
						<li>
							<i class="iconfont icon-wode font_24"></i>
							<p class="font-12 mt_5">我的</p>
						</li>
					</a>
				</ul>
			</div>
<!--footer-end-->

  <!--分类开始--> 
      <div class="mui-content mui-row mui-fullscreen">
          <div class="mui-col-xs-3 myscroll">
              <ul id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">

                {volist name="list1" id="v"}
                <li class="left-tit"><a href="#item{$v.ID}" class="mui-control-item">{$v.Name}</a></li>
                {/volist}




              </ul>
          </div>
          <div id="segmentedControlContents" class="mui-col-xs-9 myscroll" style="border-left: 1px solid #c8c7cc;">



              {volist name="list1" id="v"}
              
              <div id="item{$v.ID}" class="mui-control-content mui-active">
                <!--一组分类-->

                  {foreach name="listall" item="v2"}

                {eq name="v2.ParentID" value="$v['id']"}
                  <div class="classification-group">
                  <div class="classification-tit">童装世界{$v.ID}</div>
                  <div class="classification-item">
                    <ul class="clearfix">
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                    </ul>
                  </div>
                </div>

                  {/eq}






                <!--一组分类-->
                <div class="classification-group">
                  <div class="classification-tit">纸尿裤</div>
                  <div class="classification-item">
                    <ul class="clearfix">
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <!--一组分类-->
                <!--一组分类-->
                <div class="classification-group">
                  <div class="classification-tit">纸尿裤</div>
                  <div class="classification-item">
                    <ul class="clearfix">
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                      <li>
                      <a href="#">
                        <div class="classification-img"><img src="picture/classification-img.jpg"></div>
                        <div class="classification-txt">新生儿专用</div>
                      </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <!--一组分类-->
              </div>
              {/foreach}
        {/volist}


              






              

              
          </div>
      </div>
  <!--分类结束--> 

<script src="{:_SKIN}/weixin/cate/js/mui.min.js"></script>
<script>
  mui.init({
	  swipeBack: true, //启用右滑关闭功能
  });
  var controls = document.getElementById("segmentedControls");
  var contents = document.getElementById("segmentedControlContents");
  controls.querySelector('.mui-control-item').classList.add('mui-active');
  contents.querySelector('.mui-control-content').classList.add('mui-active');
  mui('.myscroll').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				bounce: true, //是否启用回弹
				bounceTime: 500, //回弹动画时间
				scrollTime: 500,
				directionLockThreshold: 5,
				indicators:false,
			});

</script>
</body>
</html>
